<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
     // 拦截Ajax方法
      function hookAJAX() {
        XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open;
        var customizeOpen = function(method, url, async, user, password) {
          console.log("XHR拦截成功");
          this.nativeOpen(method, url, async, user, password);
        };
        XMLHttpRequest.prototype.open = customizeOpen;
      }
      hookAJAX();

      // 拦截请求图片
      function hookImg() {
        // var old =Image.prototype.constructor;
        // Image.prototype.constructor=function(){
        //   // old.apply(this,arguments);
        //   console.log("重写image构造")
        // }

        let oldImage=Image;
          Image=function(){
            console.log("重写image构造")
          }

        // const property = Object.getOwnPropertyDescriptor(
        //   Image.prototype,
        //   "src"
        // );
        // const nativeSet = property.set;
        // function customiseSrcSet(url) {
        //   console.log("拦截图片成功")
        //   nativeSet.call(this, url);
        // }
        // Object.defineProperty(Image.prototype, "src", {
        //   set: customiseSrcSet,
        // });
      }
      hookImg();

      // 拦截全局open的url
      function hookOpen() {
        const nativeOpen = window.open;
        window.open = function(url) {
          console.log("拦截全局open成功");
          nativeOpen.call(this, url);
        };
      }
      hookOpen();

      // 拦截全局的fetch方法
      function hookFetch() {
        var fet = Object.getOwnPropertyDescriptor(window, "fetch");
        Object.defineProperty(window, "fetch", {
          value: function() {
            console.log("拦截全局的fetch成功")
            return fet.value.apply(this, arguments);
          },
        });
      }
      hookFetch();
    </script>

    <script>
        var xhr = new XMLHttpRequest();        
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if((xhr.status >= 200 && xhr.status<300) || xhr.status == 304){  //200 表示相应成功 304 表示缓存中存在请求的资源
                    // 对响应的信息写在回调函数里面
                    var str = xhr.status+' '+xhr.responseText;
                    // callback(str);
                    // console.log(str);
                }
                else{
                    return 'request is unsucessful '+xhr.status;
                }
            }
        }
	    xhr.open('get',"./1.js",true);
        xhr.send();
    </script>
    <div>拦截测试</div>
    <div id="img1"></div>
    <script>
      setTimeout(()=>{
        let str="<div>图片拦截 <img src='./2D.png'></div>";
        document.getElementById("img1").innerHTML=str;
      },0)
    </script>
    
    <!-- <link rel="stylesheet" href="./inntercept.css"> -->
    <div id="mydiv"></div>
    <script>
        // var image= new Image();
        // image.src="./2D.png";
        // document.body.appendChild(image);
    </script>
    <script>
        // window.open("http://baidu.com");
    </script>
    <script>
        fetch('./1.js').then(function(response){
            // console.log("获取接口成功",response)    
        }).catch(function(err){
            console.log("获取1.js失败"+err)
        });
    </script>

  </body>
</html>
